<template>
  <div class="register">
    <div class="content">
      <div class="left">
        <div class="center">
          <div class="hellow">
            欢迎登录微志益
          </div>
          <div class="username inputBox">
            <input type="text" placeholder="用户名" v-model="loguser.uname">
          </div>
          <div class="password inputBox">
            <input type="password" placeholder="密码" v-model="loguser.password">
          </div>
          <router-link :to="'/findpassword'" tag="div" class="forget">忘记密码</router-link>
        </div>
        <button class="registBtn" @click="loginThrottle">登录</button>
        <p class="toLogin">还没有账号，去 <span @click="toRegister">注册</span></p>
      </div>
      <div class="right">
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.register {
  width: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  background: #eff8ff;
  // background-image: url(https://images.mafengwo.net/images/signup/wallpaper/46.jpg);
  background-image: url(https://images.mafengwo.net/images/signup/wallpaper/14.jpg);
  background-position: 50% 50%;
  background-size: cover;
  .content {
    width: 680px;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 1px solid #ccc;
    overflow: hidden;
    display: flex;
    .left {
      padding: 30px 50px;
      .center {
        width: 320px;
        .hellow {
          width: 150px;
          font-size: 18px;
          font-weight: 400;
          color: rgba(113, 115, 118, 1);
          margin-bottom: 30px;
          border-bottom: 1px solid lavender;
          padding-bottom: 20px;
          text-align: center;
        }
        .inputBox {
          width: 320px;
          margin-top: 24px;
          input {
            width: 100%;
            height: 46px;
            outline: none;
            box-sizing: border-box;
            // border: 1px solid #cbcbcb;
            border: none;
            background: #f6f7f9;
            border-radius: 3px;
            padding: 11px 0 10px 16px;
            font-size: 16px;
            padding-left: 10px;
            box-shadow: 1 1 1 1 1 red;
            box-sizing: border-box;
          }
          input:focus {
            border: 1px solid lawngreen;
            box-shadow: 0 0 5px lawngreen;
            outline: 0;
          }
        }
        .forget {
          color: #333;
          font-size: 12px;
          float: right;
          padding: 15px 0;
          cursor: pointer;
        }
        .forget:hover {
          text-decoration: underline;
          color: #000;
        }
      }
      .registBtn {
        color: #fff;
        background: #3b78dd;
        font-size: 20px;
        letter-spacing: 2.2px;
        line-height: 45px;
        display: block;
        text-align: center;
        border-radius: 3px;
        width: 100%;
        border: none;
        cursor: pointer;
      }
      .toLogin {
        font-size: 14px;
        width: 100%;
        text-align: center;
        margin-top: 10px;
        span {
          cursor: pointer;
          color: red;
        }
        :hover {
          text-decoration: underline;
        }
      }
    }
    .right {
      width: 260px;
      background: url("/images/image4.jpg") no-repeat;
      background-size: cover;
      background-position: -50px 0;
    }
  }
}
</style>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import { throttle } from '@/utils/common.js'
export default {
  data () {
    return {
      loguser: {
        uname: "",
        password: ""
      }
    }
  },
  methods: {
    toRegister () {
      this.$router.push("./Register")
    },
    loginThrottle(){
       throttle(()=> {
            this.$store.commit('checkLogin', this.loguser)
            if (this.$store.state.isLogin) {
            this.$router.push("./index")
            }
            } ,300)
    },
    
  }
}
</script>